<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: "",
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      this.map = new mapboxgl.Map({
        container: "map", // container ID
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z", // style URL
        center: [118.79013542048335, 32.05775855185749], // starting position [lng, lat]
        zoom: 5, // starting zoom
      });

      //
      this.map.on("click", (evt) => {
        console.log(evt.lngLat);
      });

      this.map.on('load', ()=>{
        const geojson = {
          'type': 'FeatureCollection',
          'features': [
            {
              'type': 'Feature',
              'properties': {
                'message': 'Foo',
                'iconSize': [30, 30]
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [106.324462, 26.024695]
              }
            },
            {
              'type': 'Feature',
              'properties': {
                'message': 'Bar',
                'iconSize': [50, 50]
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [101.21582, 25.971891]
              }
            },
            {
              'type': 'Feature',
              'properties': {
                'message': 'Baz',
                'iconSize': [20, 20]
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [113.292236, 28.281518]
              }
            }
          ]
        };

        let popup = new mapboxgl.Popup()
        // Add markers to the map.
        for (const marker of geojson.features) {
          // Create a DOM element for each marker.
          const el = document.createElement('div');
          const width = marker.properties.iconSize[0];
          const height = marker.properties.iconSize[1];
          el.className = 'marker';
          el.style.backgroundColor = 'red';
          el.style.width = `${width}px`;
          el.style.height = `${height}px`;
          el.addEventListener('click', (e)=>{
            // 关键代码，阻止事件冒泡，否则弹框无法出现
            e.stopPropagation();//

            // window.alert(marker.properties.message)
            popup.setLngLat(marker.geometry.coordinates)
            .setHTML(`<p class="popup">${marker.properties.message}</p>`)
            .addTo(this.map);

          });

          // Add markers to the map.
          new mapboxgl.Marker({
            element: el
          })
            .setLngLat(marker.geometry.coordinates)
            .addTo(this.map);
        }
      })

    },
  },
};
</script>

<style>
.popup{
  height: 100px;
  width: 200px;
  background-color: aliceblue;
}
</style>
